import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

// hooks 一定要写在函数组件中
function App(){
  // useState 用来定义一个状态变量用的
  // 返回值是一个数组，数组中有两个东西
  // 第一个是变量，第二个是修改变量的方法
  const [Flag,setFlag] = useState(true)

  return <>
  <h1 className={Flag ? 'active' :  ''} onClick={()=>{
    setFlag(!Flag)
  }}> 
  组件内容 1 + 1 {1 + 1}
  </h1>  
  </>
}



root.render(
  <App />
);

